<template>
  <div class="banner-detail">
    <div class="nav-bar">
      <span class="close" @click="$router.back()">
        <img src="@/assets/goImages/vf.png" alt="" />
      </span>
      <span class="title">{{ title }}</span>
      <span class="refresh" @click="refresh">
        <img src="@/assets/goImages/wA1.png" alt="" />
      </span>
      <span class="share">
        <img src="@/assets/goImages/wA.png" alt="" />
      </span>
    </div>
    <div class="header-pic">
      <img :src="detailData && detailData.cover_url" alt="" />
    </div>
    <div class="content-list" v-if="detailData !== null">
      <content-item
        v-for="(item, index) in detailData.feeds"
        :feed_id="item.id"
        :index="index"
        :key="index"
        :title="item.title"
        :address="item.business"
        :view_count="item.view_count"
        :img_url="item.pic_list && item.pic_list[0].url"
        :desc_title="item.title"
        :desc="item.desc.split('\n')"
        :price="item.price"
        :plus_price="item.go_card_discount_price"
        :price_suffix="item.price_suffix"
      >
      </content-item>
    </div>
    <div class="footer" v-show="detailData">
      <img src="@/assets//goImages/banner_bottom.png" alt="" />
    </div>
  </div>
</template>

<script>
import axios from '@/utils/request'
import ContentItem from '@/components/public-detail/ContentItem.vue'
export default {
  props: ['id'],
  components: {
    ContentItem
  },
  data() {
    return {
      title: '',
      detailData: null
    }
  },
  methods: {
    // 请求轮播图详情页数据
    async requestBannerDetailData() {
      /*
      请求地址：https://m.xmonster.cn/v1/n_data_proxy
      请求方式：post
      请求参数：
      {
        "type":"get_feed_topic",
        "request_data":{
          "id":253
        }
      }
      */
      const { status, data } = await axios({
        url: 'https://m.xmonster.cn/v1/n_data_proxy',
        method: 'post',
        data: {
          type: 'get_feed_topic',
          request_data: {
            id: this.id
          }
        }
      })
      if (status == 'success') {
        this.title = data.title
        this.detailData = data
      }
    },
    // 刷新页面
    refresh() {
      this.detailData = null
      this.sendRequest()
    },
    async sendRequest() {
      const Toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      })
      try {
        await this.requestBannerDetailData()
      } catch {
        Toast.clear()
        this.$toast.fail('请检查网络！')
      } finally {
        Toast.clear()
      }
    }
  },
  created() {
    this.sendRequest()
  }
}
</script>

<style lang="less" scoped>
.banner-detail {
  padding-top: 46px;
  .nav-bar {
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    height: 46px;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #d94648;
    padding: 0 20px;

    .title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #fff;
      font-size: 18px;
      line-height: 30px;
      font-weight: 600;
    }
    .close,
    .refresh,
    .share {
      height: 30px;
      width: 30px;

      img {
        height: 100%;
        width: 100%;
      }

      &.close {
        margin-right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          height: 16px;
          width: 16px;
        }
      }

      &.refresh {
        margin: 0 10px;
      }
    }
  }
  .header-pic {
    height: 200px;
    img {
      height: 100%;
      width: 100%;
    }
  }
  .content-list {
    padding: 10px;
  }

  .footer {
    height: 100px;
    margin-bottom: 10px;

    img {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
